<template>
  <view class="container_afterSalesInfo">
    <view style="height: 30rpx"></view>
    <!--退货 -->
    <view class="address" v-if="order.serviceType === 'RETURN_GOODS'">
      <view class="title">退货地址</view>
      <view class="name">
        <image :src="staticUrl() + '/carts/position.png'" mode="aspectFit"></image>
        <text>收件人：{{ name }} {{ mobile }}</text>
      </view>
      <view class="addressPath">
        <text>{{ addressPath }}{{ address }}</text>
      </view>
    </view>
    <!-- 商品列表 -->
    <view class="list">
      <view class="title">普通商品</view>
      <view class="goods">
        <view v-for="(i, index) in temporary_list" :key="index" class="recommend_item">
          <view>
            <image class="original"
              :src="i.goodsImage ? i.goodsImage : staticUrl() + '/home/defaultImg.png'">
            </image>
          </view>
          <view style="width: 54%">
            <view class="goodsName">
              <text class="singleRowEllipsis">{{ i.goodsName }}</text>
            </view>
            <view class="simpleSpecs singleRowEllipsis">规格：{{ i.simpleSpecs }}</view>
            <view class="expirationDate">
              <img :src="staticUrl() + '/home/expirationDate.png'" alt="" class="_icon" />
              <text>{{ i.expirationDate }}</text>
            </view>
            <view class="manufacturer singleRowEllipsis">
              <img :src="staticUrl() + '/home/manufacturer.png'" alt="" class="_icon" />
              <text>{{ i.manufacturer }}</text>
            </view>
            <view>
              <text class="ephedrine" v-if="i.ephedrine">含麻</text>
              <text class="activityType" v-if="i.promotion">{{ i.promotion.promotionName }}</text>
            </view>
            <view class="prices">
              <view> ￥{{ i.goodsPrice }} </view>
              <text class="num">x{{ i.num }}</text>
            </view>
          </view>
        </view>
        <view class="more" @click="more" v-if="tableData.length > 2">
          <text>{{ openArrowText }}</text>
          <image :src="staticUrl() + openArrow" mode="aspectFit"></image>
        </view>
      </view>
    </view>
    <!-- 售后状态 -->
    <view class="afterSalesStatus">
      <text>售后状态</text>
      <text>{{ afterSalesStatus(order.serviceStatus) }}</text>
    </view>

    <view class="payment">
      <view>
        <text>退款原因</text><text>{{ order.reason }}</text>
      </view>
      <view>
        <text>退款金额</text><text>{{ order.applyRefundPrice }}</text>
      </view>
      <view>
        <text>申请时间</text><text>{{ order.createTime }}</text>
      </view>
      <view>
        <text>退款编号</text><text>{{ order.id }}</text>
      </view>
    </view>

    <view style="height: 44rpx"></view>

    <!-- <view class="bottom" v-if="!order.serviceStatus === 'COMPLETE'">
      <text @click="revoke">撤销申请</text>
    </view> -->
  </view>
</template>

<script>
import { getAfterOrderInfo, getAfterSalesAddres } from '@/api/order/index.js'
import dicts from '@/config/dicts.js'

export default {
  data () {
    return {
      sn: '',
      name: '',
      mobile: '',
      addressPath: '',
      address: '',
      order: '',
      temporary_list: [],
      tableData: [],
      openArrowText: '全部打开',
      openArrow: '/carts/moreRule.png',
      serviceStatus: ''
    }
  },
  onLoad (val) {
    this.sn = val.sn
    this.getList()
  },
  methods: {
    // 售后状态
    afterSalesStatus (val) {
      return dicts.afterSales_status[val]
    },
    // 查看更多
    more () {
      if (this.openArrowText === '收起') {
        this.openArrowText = '全部打开'
        this.openArrow = '/carts/moreRule.png'
        this.temporary_list = this.tableData.slice(0, 2)
      } else {
        this.openArrowText = '收起'
        this.openArrow = '/carts/putAway.png'
        this.temporary_list = this.tableData
      }
    },
    getList () {
      getAfterSalesAddres().then(res => {
        if (res.code === 200) {
          this.name = res.data.name
          this.mobile = res.data.mobile
          this.addressPath = res.data.addressPath
          this.address = res.data.address
        }
      })
      getAfterOrderInfo(this.sn).then(res => {
        if (res.code === 200) {
          this.order = res.data
          this.tableData = res.data.afterSaleItems
          this.temporary_list = res.data.afterSaleItems.slice(0, 2)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container_afterSalesInfo {
  width: 100%;
  min-height: 100vh;
  background: #f9f9f9;
}

.address {
  margin: 0 25rpx;
  background: #fff;
  font-size: 29rpx;
  padding-bottom: 41.67rpx;

  .title {
    font-weight: bold;
    padding: 38.19rpx 0 20.14rpx 21.53rpx;
    border-bottom: 1px solid #f3f3f3;
  }

  .name {
    font-weight: bold;
    padding-left: 20.83rpx;
    margin: 34.03rpx 0 21.53rpx;

    image {
      max-width: 20.14rpx;
      height: 25rpx;
      margin-right: 11.81rpx;
      margin-left: 5.42rpx;
    }
  }

  .addressPath {
    padding: 0 56.83rpx;
    font-size: 25rpx;
    color: #8d8d8d;
  }
}

.list {
  margin: 0 25rpx;
  margin-top: 25rpx;
  border-radius: 11rpx;

  .title {
    background: #fff;
    font-size: 29rpx;
    font-weight: bold;
    padding: 38.19rpx 0 20.14rpx 22.22rpx;
    border-bottom: 1px solid #f5f5f5;
  }

  .goods {
    background: #fff;

    .recommend_item {
      display: flex;
      border-bottom: 1px solid #f5f5f5;

      .num {
        color: #8d8d8d;
        float: right;
        font-size: 25rpx;
      }

      .original {
        width: 194rpx;
        height: 194rpx;
        background: #ffffff;
        padding: 34.72rpx 21rpx;
        margin: 44.44rpx 59.03rpx 58.33rpx 37.5rpx;
        box-sizing: border-box;
      }

      .goodsName {
        font-size: 29rpx;
        margin-top: 38.19rpx;
        margin-bottom: 19.44rpx;
        display: flex;
        justify-content: space-between;

        text:nth-child(1) {
          width: 80%;
        }
      }

      .simpleSpecs {
        font-size: 21rpx;
        margin-bottom: 14.58rpx;
        color: #8d8d8d;
      }

      .expirationDate {
        font-size: 21rpx;
        margin-bottom: 14.58rpx;
        color: #8d8d8d;
      }

      ._icon {
        width: 20rpx;
        height: 20rpx;
        vertical-align: middle;
        margin-right: 7.64rpx;
      }

      .manufacturer {
        font-size: 20rpx;
        margin-bottom: 14.58rpx;
        color: #8d8d8d;
      }

      .activityType {
        display: inline-block;
        font-size: 19rpx;
        color: #ef231b;
        border: 1px solid #ef231b;
        padding: 0 8.6rpx;
        border-radius: 4rpx;
        margin-top: 13.89rpx;
      }

      .prices {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 25rpx;

        view {
          color: #ec1818;
          font-weight: bold;
          font-size: 30rpx;

          text {
            font-size: 25rpx;
            font-weight: normal;
            color: #8d8d8d;
            margin-left: 6.94rpx;
          }
        }
      }
    }

    .more {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 27.38rpx 0;

      text {
        font-size: 29rpx;
        font-weight: bold;
      }

      image {
        max-width: 16.67rpx;
        height: 11.11rpx;
        margin-left: 12.5rpx;
      }
    }
  }
}

.afterSalesStatus {
  height: 105rpx;
  line-height: 104rpx;
  background: #ffffff;
  border-radius: 11rpx;
  margin: 0 25rpx;
  margin-top: 20.83rpx;
  padding: 0 25rpx;
  display: flex;
  justify-content: space-between;
  font-size: 29rpx;

  text:nth-child(2) {
    color: red;
  }
}

.payment {
  background: #fff;
  margin: 0 25rpx;
  margin-top: 20.83rpx;
  border-radius: 11rpx;
  padding: 45.83rpx 37.5rpx 50rpx 22.22rpx;

  view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 29rpx;
    margin-bottom: 47.92rpx;

    .price {
      color: #ec1818;
      font-size: 33rpx;
    }

    .coupon {
      opacity: 0.6;
      font-weight: normal;
    }

    .prices {
      color: #ec1818;
    }

    image {
      width: 9.72rpx;
      height: 15.28rpx;
      margin-left: 20rpx;
    }
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 104rpx;
  line-height: 103rpx;
  background: #ffffff;
  text-align: end;

  text {
    display: inline-block;
    width: 156rpx;
    height: 67rpx;
    line-height: 66rpx;
    font-size: 29rpx;
    color: #585858;
    text-align: center;
    border: 1px solid #585858;
    border-radius: 33rpx;
    margin-right: 34.72rpx;
  }
}
</style>
